<template>
	<view class="wrap">
		<u-time-line>
			<u-time-line-item node-top="0" v-for="(item,index) in value" :key="index">
				<template v-slot:node>
					<view class="u-node" :style="{background: item.examineInfo.color}">
						<!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
						<text :style="{color: '#fff'}">{{index + 1}}</text>
					</view>
				</template>
				<template v-slot:content>
					<view>
						<u-line
							direction="col"
							style="position: absolute;left: -50rpx;top: 40rpx;"
							:color="item.examineInfo.color"
							v-show="index != value.length - 1"
						></u-line>
						<view class="u-order-title">{{item.examineInfo.action}}</view>
						<view v-if="item.userList.length">
							<view
								v-for="($item,$index) in item.userList"
								:key="$index"
								style="display: flex; align-items:center;"
							>
								<view class="u-order-time" style="margin-right: 10rpx;">{{$item.examineTime}}</view>
								<view class="u-order-desc">{{$item.realname + " " + $item.examineInfo.action + " 此申请"}}</view>
							</view>
						</view>
						<view v-else style="display: flex; align-items:center;">
							<view class="u-order-time" style="margin-right: 10rpx;">{{item.createTime}}</view>
							<view class="u-order-desc">{{item.realname + " " + item.examineInfo.action + " 此申请"}}</view>
						</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		/** 值 */
		value: {
			type: [Array, String],
			default: () => {
				return [];
			},
		},
		/**
		 *  多选按钮
		 */
		radio: {
			type: Boolean,
			default: false,
		},
	},

	watch: {
		value(val) {
			val.map((item) => {
				item.examineInfo = this.getStatusData(item.examineStatus);
				if (item.userList) {
					item.userList.map((user) => {
						user.examineInfo = this.getStatusData(user.examineStatus);
					});
				} else {
					item.userList = [];
				}
			});
		},
	},

	methods: {
		getStatusData(status) {
			let item = {};
			if (status == 0) {
				item.value = '待审核';
				item.action = '未审核';
				item.color = '#E6A23C';
			} else if (status == 1) {
				item.value = '通过';
				item.action = '通过';
				item.color = '#67C23A';
			} else if (status == 2) {
				item.value = '拒绝';
				item.action = '拒绝';
				item.color = '#F56C6B';
			} else if (status == 3) {
				item.value = '审核中';
				item.action = '正在审核';
				item.color = '#409EFF';
			} else if (status == 4) {
				item.value = '撤回';
				item.action = '撤回';
				item.color = '#EEE';
			} else if (status == 5) {
				item.value = '未提交';
				item.action = '创建';
				item.color = '#67C23A';
			} else if (status == 6) {
				item.value = '已作废';
				item.action = '未提交';
				item.color = '#909399';
			}
			return item;
		},
	},
};
</script>

<style lang="scss" scoped>
.wrap {
	background: #fff;
	padding: 30rpx;
}

.wrap /deep/ .u-time-axis-node {
	left: -50rpx;
}

.wrap /deep/ .u-time-axis {
	padding-left: 80rpx;

	&::before {
		border: none;
	}
}

.u-node {
	width: 60rpx;
	height: 60rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title.unacive {
	color: rgb(150, 150, 150);
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 28rpx;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}

.tel {
	color: $u-type-primary;
}
</style>
